import React, {Component, useState, useEffect} from 'react';
const HOC = (title) => (WrappedComponent) => {
    return class extends Component {
      constructor (props) {
        super(props);
        this.state = {
          value: ''
        };
      }
      handleClick = () => {
        this.wref.getName();
      }
      handleOnInputChange = (e) => {
        this.setState({
          value: e.target.value
        })
      }
        render() {
          const newProps = {
            id: 1,
            value: this.state.value, // 传入值
            onInput: this.handleOnInputChange // 监听表单的输入
        }
            return (
                <section>
                    <div>{title}</div>
                    <WrappedComponent  ref={ (v) => this.wref = v }  {...newProps} sex='男'/>
                    <button onClick={this.handleClick}>获取被包裹组件方法 getName</button>
                </section>
            )
        }
    }
}

// class Example extends React.PureComponent {
class Example extends Component {
    constructor(props) {
      super(props);
      this.state = {
        width: '100%',
        height: '100%'
      }
    }
    getName = () => {
      console.log('获取到了name')
    }
  
    componentWillMount() {
      if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        return;
      } else {
        this.setState({
          width: '375px',
          height: '640px'
        })
      }
    }
  
    render() {
      let { width, height } = this.state;
      return (
        <div className="activity">
          <div className="activity-content" style={{ width, height }}>
            <button className="btn">参加活动, id:{this.props.id},sex: {this.props.sex}</button>
            <input type="text" value={this.props.value} onInput={this.props.onInput} />
          </div>
        </div>
      )
    }
  }
  export default HOC('这是高阶组件函数')(Example)